<template>
  <div class="myInfo">
    <UserInfoCom
      :userName="userName || ''"
      :depName="depName || ''"
      :isMore="false"
      :avatar="avatar"
    />
    <div>
      <h3 class="zh">账号信息</h3>
      <div class="info_box">
        <div class="info_item" v-for="item in userData" :key="item.icon">
          <p>
            <van-image :src="item.icon" class="icon_img">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <span>
              {{ item.name }}
            </span>
          </p>
          <span class="item_val"> {{ item.val }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { getLoginUserAPi } from '@/api/login.js';
import usrId from '@/assets/images/usrId.png';
import dep from '@/assets/images/dep.png';
import tel from '@/assets/images/tel.png';
import email from '@/assets/images/email.png';
const userData = ref([]);
const avatar = ref('');
const userName = ref('');
const depName = ref('');
onBeforeMount(() => {
  getLoginUserAPi().then((res) => {
    const data = res.data;
    userName.value = data.nickName || '';
    depName.value = data.orgName || '';
    avatar.value = data.avatar || '';
    userData.value = [
      { icon: usrId, name: '用户ID', val: data.userId || '-' },
      { icon: dep, name: '部门', val: data.orgName || '-' },
      { icon: tel, name: '手机', val: data.tel || '-' },
      { icon: email, name: '邮箱', val: data.email || '-' },
    ];
  });
});
</script>
<style scoped lang="scss">
.myInfo {
  padding: 24px 12px 0 12px;
  background: url('@/assets/images/backImg.png') no-repeat;
  background-size: 100% 100%;
  .zh {
    height: 24px;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 15px;
    color: #333333;
    line-height: 24px;
    text-align: left;
    margin: 20px 0;
  }
  .info_box {
    padding: 0 12px;
  }

  .info_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 24px;
    font-weight: 400;
    font-size: 14px;
    margin: 4px 0;
    .icon_img {
      width: 20px;
      height: 20px;
      position: relative;
      top: 4px;
      margin-right: 8px;
    }
    .item_val {
      height: 24px;
      color: #999999;
    }
  }
}
</style>
